import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';

/**
 * CircleTransition 组件
 * 用于实现以指定圆心和半径的同心圆clip-path动画切换内容
 *
 * @param {boolean} show - 是否显示动画层（控制动画的出现/消失）
 * @param {{x: number, y: number}} center - 动画圆心坐标（通常为按钮中心）
 * @param {number} maxRadius - 动画圆的最大半径（需覆盖全屏）
 * @param {React.ReactNode} children - 动画层内要显示的内容（目标页面）
 * @param {function} onAnimationComplete - 动画完成后的回调（用于通知父组件切换页面）
 * @param {'out'|'in'} direction - 动画方向，'out'为扩散，'in'为收缩
 */
const CircleTransition = ({
  show,
  center,
  maxRadius,
  children,
  onAnimationComplete,
  direction = 'out',
}) => {
  // clip-path 动画起止
  const initialClip = direction === 'out'
    ? `circle(0px at ${center.x}px ${center.y}px)`
    : `circle(${maxRadius}px at ${center.x}px ${center.y}px)`;
  const animateClip = direction === 'out'
    ? `circle(${maxRadius}px at ${center.x}px ${center.y}px)`
    : `circle(0px at ${center.x}px ${center.y}px)`;

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100vw',
            height: '100vh',
            zIndex: 1000,
            pointerEvents: 'auto',
            background: '#fff',
            clipPath: animateClip,
            overflow: 'hidden',
          }}
          initial={{ clipPath: initialClip }}
          animate={{ clipPath: animateClip }}
          exit={{ clipPath: initialClip }}
          transition={{ duration: 0.7, ease: 'easeInOut' }}
          onAnimationComplete={onAnimationComplete}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default CircleTransition;
